<template>
    <div class="center-top">
        <div class="top-item">
            <div class="item-header"><span class="title-info">原料库</span></div>
            <div class="item-detail">
                <div class="temp">
                    <div class="temp-top">
                        <img  src="../components/img/icon3.png"/>
                        <div class="info">{{temp}}</div>
                    </div>
                    <div class="temp-bottom">温度（℃）</div>
                </div>
                <div class="temp">
                    <div class="temp-top">
                        <img  src="../components/img/icon1.png"/>
                        <div class="info">{{humidity}}</div>
                    </div>
                    <div class="temp-bottom">湿度（RH）</div>
                </div>
            </div>
        </div>
        <div class="top-item">
            <div class="item-header"><span class="title-info">成品库</span></div>
            <div class="item-detail">
                <div class="temp">
                    <div class="temp-top">
                        <img  src="../components/img/icon4.png"/>
                        <div class="info">{{temp}}</div>
                    </div>
                    <div class="temp-bottom">温度（℃）</div>
                </div>
                <div class="temp">
                    <div class="temp-top">
                        <img  src="../components/img/icon2.png"/>
                        <div class="info">{{humidity}}</div>
                    </div>
                    <div class="temp-bottom">湿度（RH）</div>
                </div>
            </div>
        </div>
    </div>
   
</template>
<script setup>
    import {wsUrl} from "../utlis/requests"
    import { ref, onMounted, onUnmounted} from "vue"
    const temp=ref(0)  //温度
    const humidity=ref(0)  //湿度
    let ws=null;
    let reconnectTimeout = null; // 重连超时控制

    // 建立 WebSocket 连接
    const connectWebSocket = () => {
        ws = new WebSocket(wsUrl); // 替换为实际的 WebSocket 服务 URL
        ws.onopen = () => {
            console.log("WebSocket 连接已建立");
        };

        ws.onmessage = (event) => {
            //console.log('eee',event.data)
            if(event.data!='Connected'){
                let datas=JSON.parse(event.data)
                //console.log('datas',datas)
                if(datas.type=='temperatureSensor'){
                    temp.value=datas.content.temperature
                    humidity.value=datas.content.humidity
                }
            }
        };
        ws.onerror = (error) => {
            console.error("WebSocket 发生错误", error);
        };

        ws.onclose = (event) => {
        console.log("WebSocket 连接已关闭", event.code);
        handleReconnect(); // WebSocket 连接关闭时尝试重连
        };
    };

    // 处理 WebSocket 连接断开后的重连
    const handleReconnect = () => {
        // 如果已经在重连，避免重复重连
        if (reconnectTimeout) {
        return;
        }

        reconnectTimeout = setTimeout(() => {
        //console.log("正在尝试重新连接 WebSocket...");
        connectWebSocket();
        reconnectTimeout = null; // 重连后清除重连超时
        }, 5000); // 5 秒后重连
    };

    onMounted(()=>{
        connectWebSocket(); // 组件加载时连接 WebSocket
    })

    onUnmounted(() => {
    if (ws) {
        ws.close();
    }
    });


</script>
<style lang="less" scoped>
.center-top{
    width:712px;
    height:188px;
    margin-bottom:20px;
    display:flex;
    justify-content: space-around;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
    .top-item{
        padding: 15px;
        width:346px;
        height:188px;
        display: flex;
        flex-direction: column;
        margin-right: 16px;
        background: url('../components/img/center-top.png') no-repeat;
        background-size: 100% 100%;
        &:last-child{
            margin-right:0;
        }
        .item-header{
            background: url('../components/img/titleSmall-bg.png') no-repeat;
            background-size: 100% 100%;
            margin-bottom: 6px;
            height:36px;
            line-height:36px;
            width:320px;
            .title-info{
                margin-left:40px;
            }
        }
        .item-detail{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .temp{
                display: flex;
                flex-direction:column;
                width:149px;
                height:118px;
                border:1px solid #0b4685;
                padding:12px;
                .temp-top{
                    display:flex;
                    align-items:center;
                    border-bottom:1px solid #0b4685;
                    padding:8px;
                    img{
                        width:40px;
                        height:40px;
                        margin-right:16px;
                    }
                }
                .temp-bottom{
                    height:45px;
                    line-height:45px;
                }
            }
        }
    }
}
</style>